const app = new Vue({
  el: "#app",
  data: {
    pageSize: 6,
    pageNumber: 1,
    cardList: [],
    loading: false,
    isEnd: false,
    tipText: "",
    filterAreaList: [],
    filterIndustryList: [],
    filterSelected: {
      province: "",
      city: "",
      industry: "",
    },
    showFilter: {
      area: false,
      industry: false,
    },
    animFilter: {
      area: false,
      industry: false,
    },
    formMessage: {
      uid: "",
      name: "", // 姓名
      phone: "", // 手机号
      desc: "",
    },
    ruleMessage: {
      name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      phone: [
        { required: true, message: "请输入手机号", trigger: "blur" },
        {
          pattern: /^1[3456789]\d{9}$/,
          message: "请输入正确的手机号",
          trigger: "blur",
        },
      ],
      desc: [{ required: true, message: "请输入补充内容", trigger: "blur" }],
    },
    loadingSubmit: false, // 提交中
    showDialogMessage: false,
  },
  mounted() {
    // 添加页面滚动事件
    window.addEventListener("scroll", this.handleScroll);
    this.getCardList("init");
    this.getAreaList();
    this.getIndustryList();
  },
  methods: {
    // 获取信息
    getCardList(type) {
      if ((this.loading || this.isEnd) && type !== "init") {
        return;
      }
      this.loading = true;
      this.tipText = "数据加载中...";
      if (type === "init") {
        this.pageNumber = 1;
        this.cardList = [];
        this.isEnd = false;
      } else {
        this.pageNumber++;
      }
      apiGetCardList({
        pageSize: this.pageSize,
        pageNumber: this.pageNumber,
        province: this.filterSelected.province,
        city: this.filterSelected.city,
        industry: this.filterSelected.industry,
      })
        .then((res) => {
          this.loading = false;
          const { data } = res;
          if (data) {
            this.cardList.push(...data);
          }
          if (data.length < this.pageSize) {
            this.isEnd = true;
            this.tipText = "没有更多数据了";
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$toast.fail((err && err.msg) || err);
        });
    },
    // 获取区域列表
    getAreaList() {
      apiGetAreaList()
        .then((res) => {
          this.filterAreaList = res.data;
        })
        .catch((err) => {
          this.$toast.fail((err && err.msg) || err);
        });
    },
    // 获取行业列表
    getIndustryList() {
      apiGetIndustryList()
        .then((res) => {
          this.filterIndustryList = res.data;
        })
        .catch((err) => {
          this.$toast.fail((err && err.msg) || err);
        });
    },
    // 页面滚动加载更多
    handleScroll() {
      // 计算页面滚动高度
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 计算页面可见高度
      const clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 计算页面总高度
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 当页面滚动到底部时
      if (scrollTop + clientHeight >= scrollHeight - 100) {
        // 加载更多数据
        this.getCardList("scroll");
      }
    },
    // 删除
    handleDelete(item) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确认删除吗？",
        })
        .then(() => {
          apiDelCard({
            id: item.id,
          })
            .then((res) => {
              this.$toast.success("删除成功");
              this.cardList = this.cardList.filter((i) => i.id !== item.id);
            })
            .catch((err) => {
              this.$toast.fail((err && err.msg) || err);
            });
        });
    },
    // 显示筛选
    handleShowFilter(type) {
      let another = type === "area" ? "industry" : "area";
      this.showFilter[another] = false;
      this.animFilter[another] = false;

      if (this.showFilter[type]) {
        this.allowBodyScroll(true);
        this.animFilter[type] = false;
        setTimeout(() => {
          this.showFilter[type] = false;
        }, 400);
      } else {
        this.allowBodyScroll(false);
        this.showFilter[type] = true;
        setTimeout(() => {
          this.animFilter[type] = true;
        }, 0);
      }
    },
    allowBodyScroll(allow) {
      if (allow) {
        document.body.style.height = "auto";
        document.body.style.overflow = "auto";
      } else {
        document.body.style.height = "100vh";
        document.body.style.overflow = "hidden";
      }
    },
    // 选择选项
    handleFilterItemClick(type, value) {
      console.log(type, value);
      this.filterSelected[type] = value;
    },
    // 重置
    reset(type) {
      if (type === "area") {
        this.filterSelected.province = "";
        this.filterSelected.city = "";
      } else {
        this.filterSelected.industry = "";
      }
    },
    // 完成
    submit() {
      this.showFilter.area = false;
      this.showFilter.industry = false;
      this.animFilter.area = false;
      this.animFilter.industry = false;
      this.allowBodyScroll(true);
      this.getCardList("init");
    },
    // 返回
    handleBack() {
      window.history.back();
    },
    // 在线询盘
    handleInquiry(item) {
      if (parseInt(item.ischat) === 1) {
        // 有在线了聊天权限，跳转在线聊天
        location.href = item.link;
      } else {
        // 没有在线聊天权限，显示留言框
        this.formMessage.uid = item.uid;
        // 获取登录用户信息
        apiGetUserInfo()
          .then((res) => {
            const { name, phone } = res.data;
            this.formMessage.name = name;
            this.formMessage.phone = phone;
            this.showDialogMessage = true;
          })
          .catch((err) => {
            this.showDialogMessage = true;
          });
      }
    },
    // 提交留言
    onSubmitMessage() {
      if (this.loadingSubmit) {
        return;
      }
      if (this.validate(this.formMessage, this.ruleMessage)) {
        this.loadingSubmit = true;
        apiLeavaMessage(this.formMessage)
          .then((res) => {
            vant.Toast.success("提交成功");
            setTimeout(() => {
              this.showDialogMessage = false;
              this.loadingSubmit = false;
            }, 1000);
          })
          .catch((err) => {
            vant.Toast.fail((err && err.msg) || err);
            this.loadingSubmit = false;
          });
      }
    },
    // 表单验证
    validate(form, rule) {
      let rersult = true;
      for (let key in rule) {
        rule[key].forEach((item) => {
          if (rersult) {
            if (item.required && !form[key].trim()) {
              vant.Toast(item.message);
              rersult = false;
            }
            if (item.pattern && !item.pattern.test(form[key])) {
              vant.Toast(item.message);
              rersult = false;
            }
          }
        });
      }
      return rersult;
    },
  },
});
